iT邦幫忙

DAY 36
6

30天掌握Sass語法系列 第 32

Sass開發流程設計 - (6) 如何逐步整合自己的Sass資料夾

  • 分享至 

  • xImage
  •  

在開發數個網站後,
網頁設計師通常都會思考該如何化繁為簡地設計自己的開發流程,
今天則就提供一些心法讓剛碰觸Sass的朋友了解該如何整合自己的Sass資料,
範例檔就拿前四天我所設計的demo網站流程來示範:
Yes
1.設計開發專用的資料夾
通常在設計網頁時,
你自然會發現有一些網頁設計流程都是每次時常在做的,
像這種重工的工作內容,
你就可以思考該如何減少這樣的情況,
像每個網頁都一定會有固定的資料夾與程式檔,
例如一定會有:
1.index.html
2.images資料夾
3.CSS資料夾

所以在做網站時,通常我都會做一個乾淨的版本,
當我要做新專案時,就拿那一份複製貼上,
自然我就節省掉很多開新資料夾與檔案的時間。

那像Sass資料夾,我們就可以一一來審視有哪些Sass我們是可以保留起來,
做為下次開發而用,所以我們就以前幾天所做的Demo網站來看,
如果你沒下載下來的話,可以瀏覽我放在Github檔案,點進去就可以看到各程式碼:
https://github.com/gonsakon/Sass-Layout-Demo/tree/master/sass

Sass架構:
Defaule.sass
└_variable.sass
└_mixin.sass
└_reset.sass
└_extend.sass
└_index.sass

1.default.sass
這個資料夾主要是拿來合併所有的Sass檔案,
同時也是做為HTML要載入CSS的檔案(default.css),
所以當然必須留著。

2._variable.sass

$text-color: #292929
$hot-color: #01a5ca
$width:940px
$line-height: 1.8
$border-color: #F4F4F4

在網頁設計中,
設計全域文字顏色與熱門顏色是一定會有的,
另外網站寬度與行距也ok,
但線條顏色可能就不太會出現,
所以保留前四個起來即可。

3._mixin.sass

@mixin bg($img)   
  background: url("../images/#{$img}")  
  width: image-width("../images/#{$img}")  
  height: image-height("../images/#{$img}")  

做網站時,時常會要計算圖片寬高與背景圖案,
所以這個自然也留著

4._reset.sass
reset自然不用說一定要留著的了。

5._extend.sass

%clearfix
  &:before
    content: ""
    display: table
  &:after
    content: ""
    display: table
    clear: both
  zoom: 1

為了要合併清除浮動的class,
這個自然也是必要的,
所以也留著。

6._index.sass
想當然爾,
裡面所設計的東西都是屬於這個網站內容,
所以全部刪掉。

經由上述的觀察,
你就可以整理出一個乾淨的Sass資料夾,
將他複製出來後,等到下次網站開發就可以高高興興地使用了。
當然當你的網頁技術更加精湛後,
你自然就會逐步擴增你的Sass結構了,
如同我第十八天所分享的部分:http://ithelp.ithome.com.tw/question/10132821

另也附上整理乾淨版本的流程影片:
Yes

2.思考Sass的設計應用
在做網站的過程中,
其實也是在省思有哪些流程太過繁複,
再利用Sass功能來進行簡化,例如:
a.顏色色碼都盡量變數化
b.如果設計效果上有多重選擇,便可結合if()+@mixin來設計
c.當一塊模組元素要移動到其他頁面元素上時,思考如何用@extend合併相同樣式
d.為了要讓自己快速找到目標程式碼,Sass檔案該分割得多細才容易找到,像譬如表頭的_header.sass又可切割為header資料夾裡面又有_logo.sass、_topbar.sass等等。利用sublime強大搜尋功能也可快速尋找到檔案。所以也有網頁設計師建議,一個Sass檔案不宜放2~300行以上程式碼,這樣便失去Sass程式碼分割化的優點。

從上述的種種例子可以看出,
Sass的設計思維比起以往寫傳統CSS又更加廣泛了些,
希望透過上面第一點的實際操作流程,
讓大家了解該如何逐步整合自己的Sass檔。


上一篇
Sass開發流程設計 - (5) Sass設計資源整理
下一篇
Sass開發流程設計 - (7) susy grid教學(1)
系列文
30天掌握Sass語法41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0

我要留言

立即登入留言